<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // this关键字：在浏览器调用函数的时候，每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this。
        //            this指向一个对象，这个对象被称为函数执行的上下文对象。
        // 根据函数的调用方式不同，this就会指向不同的对象：
        // （1）以函数形式调用（函数名（）），this永远指向window对象
        // （2）以方法形式调用（obj.fn()）,this就指向调用这个方法的对象

        // function test(){
        //     console.log("以函数形式调用，this的指向：",this);//window

        //     function fn(){
        //         console.log("以函数形式调用，this的指向2：",this);//window
        //     }
        //     fn();
        // }
        // test();


        // let obj1={
        //     name:"唐僧",
        //     age:30,
        //     fn:function(){
        //         console.log("以方法形式调用，this的指向：",this);//obj
        //         console.log(this.name);//唐僧
        //     }
        // }
        // obj1.fn();

        // let xyz=obj1.fn;//把函数赋值给一个变量
        // xyz();//以函数形式调用，this指向window


        // 箭头函数的this指向:箭头函数的this指向最近的普通函数this指向（或者是是继承离它最近的普通函数的this指向）
        //                   如果没有上级函数，就默认指向window
        // 注意：箭头函数是没有自己的this指向的，都是继承上级函数的this指向
        let obj={
            name:"悟空",
            fn:function(){
                console.log("普通函数的this指向：",this);//obj
                let test=()=>{
                    console.log("有上级函数的箭头函数this：",this);//obj
                }
                test();
            },
            fn2:()=>{
                console.log("没有上级函数的箭头函数this：",this);//window
            }

        }

        obj.fn();
        obj.fn2();


    </script>
</body>
</html>